<template>
  <div>
    <highcharts :options="options" ref="highchart"></highcharts>
    <!--<div class="tip-wrap">{{$t('report.hicharsNotes')}}<span class="tips tips-show">{{$t('report.hicharsLight')}}</span><span class="tips tips-hide">{{$t('report.hicharsDark')}}</span></div>-->
  </div>
</template>
<script>
  import { colorConfigArr } from '@/utils/reportUtils'
  import Highcharts from 'highcharts'
  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  })
  export default {
    name: 'monitorLine',
    data () {
      return {
        // options: {
        //   chart: {
        //     type: 'line'
        //   },
        //   title: {
        //     text: '月平均气温'
        //   },
        //   subtitle: {
        //     text: '数据来源: WorldClimate.com'
        //   },
        //   xAxis: {
        //     labels: {
        //       formatter: function () {
        //         return Highcharts.dateFormat('%H:%M', this.value)
        //       }
        //     },
        //     categories: []
        //   },
        //   yAxis: {
        //     title: {
        //       text: '气温 (°C)'
        //     }
        //   },
        //   plotOptions: {
        //     line: {
        //       dataLabels: {
        //         // 开启数据标签
        //         enabled: true
        //       },
        //       // 关闭鼠标跟踪，对应的提示框、点击事件会失效
        //       enableMouseTracking: false
        //     }
        //   },
        //   series: []
        // }
        options: {
          chart: { type: 'line', animation: false },
          colors: colorConfigArr,
          xAxis: {
            visible: true,
            type: 'datetime',
            labels: {
              formatter: function () {
                return Highcharts.dateFormat('%H:%M', this.value)
              }
            },
            minTickInterval: 30 * 60 * 1000,
            minRange: 60 * 60 * 6 * 1000
          },
          yAxis: {
            title: {
              text: ''
            },
            allowDecimals: false
          },
          title: {
            text: ''
          },
          allowDecimals: false,
          plotOptions: {
            series: {
              animation: false
            },
            line: {
              events: {
                legendItemClick: function (event) {
                  return false
                }
              }
            }
          },
          legend: { align: 'center', verticalAlign: 'top', y: 30 },
          tooltip: {
            xDateFormat: '%H:%M',
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}{point.valueSuffix}</b><br/>',
            shared: true
          },
          credits: { enabled: false },
          series: []
        }
      }
    },
    props: {
      data: {
        type: Object,
        default: function () {
          return {
            xCategories: [],
            seriesArray: []
          }
        }
      },
      chartStyle: {
        type: Object,
        default: function () {}
      }
    },
    components: {
    },
    watch: {
      'data.seriesArray' () {
        this.init()
      },
      '$store.state.navMenuState' () {
        this.reflow()
      }
    },
    computed: {
    },
    methods: {
      init () {
        this.options.xAxis.categories = this.data.xCategories
        this.options.series = this.data.seriesArray
      },
      reflow () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
        }
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .tip-wrap
    color $cf-gray4
  .tips
    display inline-block
    position relative
    padding-right 15px
    &:before
      content: ''
      display inline-block
      border-radius 50%
      width 10px
      height 10px
      margin-right 5px
      background-color $cf-gray7
  .tips.tips-show
    padding-left 15px
    &:before
      background-color $c-main
</style>
